1. 브라우저가 렌더링을 수행하는 과정

1-1. DOM, CSSOM, Render Tree 구성

1. 웹 페이지가 (다운)로딩될 때, 브라우저는 먼저 HTML text를 읽고, 읽은 값을 기반으로 DOM Tree를 구성

2. CSS를 처리해서 CSSOM Tree를 구성

3. DOM, CSSOM Tree가 구성되면 이를 토대로 Render Tree를 구성

4. Render Tree가 구성되면 브라우저는 각 element들을 화면에 출력하기 시작, 화면에 출력하는 작업에는 Layout, Paint, Compositiong 작업이 동반됨

1-2. Layout Operation

첫 번째로 브라우저는 각 Render-Tree에 포함된 노드들을 화면에 배치할 레이아웃을 생성함

Layout Operation 참고 이미지 Ref. 

레이아웃은 각 Node들의 픽셀 사이즈(Pixel size)와 화면의 어디에 배치되어야 할지(position)로 구성되어 있음

이처럼 각 노드들의 레이아웃 정보를 계산하기 때문 layout Operation이라고 하거나 reflow, browser reflow라고도 불리며,

이러한 Layout Operation은 사용자가 Window를 스크롤(scroll)하거나 사이즈 조정(resize), 혹은 DOM 엘리먼트들을 조작할 때마다 발생함 (개발자 도구 렌더링 탭에서 확인)

1-3. Paint Operation

여기까지 진행되었을 경우, 현재 브라우저는 화면에 표시되어야 하는 기하학적인(Geometric) 정보들이 준비되었음

1-3-1. Layer 생성

Render-Tree의 엘리먼트들이 겹치고, 각각은 CSS properties가 있기 때문에 브라우저는 일련의 층 형태인 layer를 생성함¹

1-3-2. Painting 작업

이제 Layer 들이 준비되었고, 이 Layer들을 화면에 합치고 화면에 그릴 수 있으며, 브라우저는 모든 레이어들을 한 번에 그리지 않고 분리해서 하나씩 그림(Painting)

1-4. Rasterization, Compositiong Operation

Painting Operation까지 수행되었다 하더라도, 아직 화면에는 하나의 픽셀도 그려지지 않음

현재 브라우저가 가지고 있는 것은 특정한 순서에 따라 화면에 그려져야 하는 서로 다른 Layer들이며,

이러한 정보를 토대로 각 Layer 내부에서 브라우저가 테두리, 배경색 등 보이는 요소들에 대한 개별 픽셀들을 채우는 프로세스를 rasterization이라고 함

Compositing operation 단계에서는 이러한 Layer들은 최종적으로 화면에 그려내기 위해 GPU로 전달

화면을 그리기 위해 전체 레이어를 보내는 것은 비효율적이라고 볼 수 있는데, 왜냐하면 이 동작은 매번 발생할 수 있기 때문(이 동작을 reflow or repaint 라고함)

2. CRP, Critical Rendering Path

지금까지 살펴본 여러 단계들을 토대로 일련의 이벤트 순서를 거치면서 브라우저는 웹 페이지를 화면에 렌더링할 수 있게 되는데, 이러한 일련의 렌더링 과정을 Critical Rendering Path라고 함